<template>
	<view class="">
		<vue-ueditor-wrap v-model="msg" editor-id="xiumi-demo-01" :config="editorConfig" @before-init="addXiumiDialog" style="height: 500px;"></vue-ueditor-wrap>

		<uni-popup ref="imgPop">
			<view class="popview" style="">
				<text>我是一个弹窗,可以自定义图片上传</text>
				<view @click="addImg" class="" style="margin: 30rpx;width: 100px;height: 100px;background-color: #EEEEEE;"></view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			msg: '',
			images: []
		};
	},
	created() {
		// 这里根据你项目的具体情况设置，我这么设置是针对这个文档网站的
		this.UEDITOR_HOME_URL = process.env.NODE_ENV === 'development' ? '/static/UEditor/' : `${process.env.PUBLIC_PATH}UEditor/`;
		this.editorConfig = {
			serverUrl: '//a58f1186-042b-4133-a1d8-9cb0c77b3be2.bspapp.com/http/upmedia',
			UEDITOR_HOME_URL: this.UEDITOR_HOME_URL,
			catchRemoteImageEnable: true, // 抓取远程图片
			listiconpath: `${this.UEDITOR_HOME_URL}listicon/`,
			initialFrameHeight :400//编辑器的高度
			// whiteList 已经在 ueditor.config.js 里改过了，此处略
		};
	},

	methods: {
		addImg: function() {
			let self = this;
			uniCloud
				.chooseAndUploadFile({
					type: 'image'
				})
				.then(res => {
					console.log(res);
					for (let item of res.tempFiles) {
						self.msg = self.msg + `<image src=${item.url}></image>`;
					}
					self.$refs.imgPop.close();
				});
		},

		addXiumiDialog(editorId) {
			let self = this;
			window.UE.registerUI(
				'xiumi-dialog customImgUp',
				(editor, uiName) => {
					
					if(uiName=='xiumi-dialog')
					{
						// 创建 “秀米弹窗”
						const dialog = new window.UE.ui.Dialog({
							// 注意：这是 xiumi-ue-dialog-v5.html 文件的访问链接，这个页面会通过 iframe 的方式嵌入到弹窗里
							iframeUrl: this.UEDITOR_HOME_URL + 'xiumi/xiumi-ue-dialog-v5.html',
							editor,
							name: uiName,
							title: '秀米图文消息助手',
							cssRules: 'width: ' + (window.innerWidth - 60) + 'px; height: ' + (window.innerHeight - 60) + 'px;'
						});
						
						// 添加自定义按钮用于唤起“秀米弹窗”
						const btn = new window.UE.ui.Button({
							name: uiName,
							title: uiName,
							cssRules: `background-image: url('//dl.xiumi.us/connect/ue/xiumi-connect-icon.png') !important; background-size: contain;`,
							onclick() {
								if (uiName == 'xiumi-dialog') {
									dialog.render();
									dialog.open();
								} else {
									self.$refs.imgPop.open();
								}
							}
						});
						console.log('走了几次')
						
						return btn
						
					}
					else{
						// 添加自定义按钮用于唤起“秀米弹窗”
						const btn = new window.UE.ui.Button({
							name: '自定义图片上传',
							title: '图片上传',
							cssRules: `background-image: url('/static/logo.png') !important; background-size: contain;`,
							onclick() {
								if (uiName == 'xiumi-dialog') {
									dialog.render();
									dialog.open();
								} else {
									self.$refs.imgPop.open();
								}
							}
						});
						console.log('走了几次')
						
						return btn
						
						
					}
					
				},
				0 /* 指定添加到工具栏上的那个位置，默认时追加到最后 */,
				editorId /* 指定这个UI是哪个编辑器实例上的，默认是页面上所有的编辑器都会添加这个按钮 */
			);
		}
	}
};
</script>
<style>
.popview {
	background-color: #ffffff;
	width: 300px;
	height: 200px;
	padding: 20rpx;
	border-radius: 10rpx;
}
</style>
